class Slideshow {
    // 获取数据
    constructor(id) {
        this.wrap = document.querySelector(id)
        this.arrow_l = this.wrap.querySelector('.arrow-l')
        this.arrow_r = this.wrap.querySelector('.arrow-r')
        this.ulEle = this.wrap.querySelector('ul')
        this.olEle = this.wrap.querySelector('ol')
        this.width = parseInt(window.getComputedStyle(this.wrap).width)
        this.num = 0
        this.circleNum = 0
        this.flag = true
        this.arrowEvent()
        this.createCircle()
        this.arrowToNextPic()
    }
    // 移除添加样式
    clearAddClass() {
        for (let i = 0; i < this.olEle.children.length; i++) {
            this.olEle.children[i].classList.remove('active')
        }
        this.olEle.children[this.circleNum].classList.add('active')
    }
    // 鼠标经过轮播图时显示小箭头，移出时隐藏小箭头
    arrowEvent() {
        // 自动播放
        let _this = this
        let startTime

        function moveFn(now) {
            if (!startTime) {
                startTime = now
            }
            if (now - startTime >= 2500) {
                startTime = now
                _this.onRight()
            }
            timerID = requestAnimationFrame(moveFn)
        }
        let timerID = requestAnimationFrame(moveFn)
        // 鼠标经过轮播图时显示小箭头，移出时隐藏小箭头
        this.wrap.addEventListener('mouseenter', function () {
            _this.arrow_l.style.display = 'block'
            _this.arrow_r.style.display = 'block'
            // 鼠标移上去停止定时器
            cancelAnimationFrame(timerID)
            timerID = null
        })
        this.wrap.addEventListener('mouseleave', function () {
            _this.arrow_l.style.display = 'none'
            _this.arrow_r.style.display = 'none'
            let startTime1

            function moveFn(now) {
                if (!startTime1) {
                    startTime1 = now
                }
                if (now - startTime1 >= 2500) {
                    startTime1 = now
                    _this.onRight()
                }
                timerID = requestAnimationFrame(moveFn)
            }
            timerID = requestAnimationFrame(moveFn)
        })
    }
    createCircle() {
        // 动态的生成小圆圈，使得图片张数和小圆圈个数相等
        for (let i = 0; i < this.ulEle.children.length; i++) {
            let li = document.createElement('li')
            // 自定义索引号记录小圆圈
            li.setAttribute('index', i)
            this.olEle.appendChild(li)
            // 生成小圆圈的同时绑定点击事件
            let _this = this
            li.addEventListener('click', function () {
                // 点击小圆点时，原有样式移除，给当前点击小圆点添加样式
                for (let i = 0; i < _this.olEle.children.length; i++) {
                    _this.olEle.children[i].classList.remove('active')
                }
                this.classList.add('active')
                // 点击小圆圈移动图片，移动的是ul
                // 移动距离为小圆圈的索引号乘以图片的宽度
                let index = this.getAttribute('index')
                _this.num = index
                _this.circleNum = index
                console.log(index)
                let width = parseInt(window.getComputedStyle(_this.wrap).width)
                console.log(width)
                move(_this.ulEle, {
                    offset: -index * width,
                    rate: 15
                })
                console.log(index * width)
            })
        }
        // 将第一个小圆圈设置样式
        this.olEle.firstElementChild.classList.add('active')
    }

    onRight() {
        let _this = this
        this.flag = false
        // 当图片滑动到最后一张时将left置为0
        if (this.num == this.ulEle.children.length - 1) {
            this.ulEle.style.left = 0
            this.num = 0
        }
        this.num++
        move(this.ulEle, {
            offset: -this.num * this.width,
            rate: 15
        }, function () {
            _this.flag = true
        })
        this.circleNum++
        // 如果circleNum == _this.olEle.children.length，说明到了克隆的那张图片
        if (this.circleNum == this.olEle.children.length) {
            // 将值复原
            this.circleNum = 0
        }
        this.clearAddClass()
    }

    // 点击箭头按钮图片进行相应的跳转
    arrowToNextPic() {
        // 克隆第一张图片放在ul的最后面
        let firstPic = this.ulEle.children[0].cloneNode(true)
        this.ulEle.appendChild(firstPic)
        // 记录图片滚动到哪儿
        let _this = this
        // 点击右侧箭头按钮移动到下一张
        this.arrow_r.addEventListener('click', function () {
            if (_this.flag) {
                _this.onRight()
            }
        })
        // 点击左侧箭头按钮移动到上一张
        this.arrow_l.addEventListener('click', function () {
            if (_this.flag) {
                _this.flag = false
                // 当图片滑动到第一张时将left置为 -_this.num * width
                if (_this.num == 0) {
                    _this.num = _this.ulEle.children.length - 1
                    _this.ulEle.style.left = -_this.num * _this.width
                }
                _this.num--
                move(_this.ulEle, {
                    offset: -_this.num * _this.width,
                    rate: 15
                }, function () {
                    _this.flag = true
                })
                _this.circleNum--
                // 如果circleNum == _this.olEle.children.length，说明到了克隆的那张图片
                if (_this.circleNum < 0) {
                    // 将值复原
                    _this.circleNum = _this.olEle.children.length - 1
                }
                _this.clearAddClass()
            }
        })
    }
}
// 创建
let slideShow = new Slideshow('#wrap')